<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function() {
if($(this).hasClass("red"))
$(this)
.animate({left:120})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120});    
});
})
</script>
<style type="text/css">
div{ position:absolute; width:100px; height:100px}
.blue{ background:blue; left:0px}
.red{ background:red; left:120px; z-index:2;}
.green { background:green; left:240px;}
.pos{ top:120px;}
</style>
</head> 

<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="pos"></div>
</body>
</html>
